<template>
  <div class="progress-container">
    <div class="progress-line-bg">
      <div class="progress-line"></div>
    </div>
    <div class="progress-end"></div>
  </div>
</template>

<script setup></script>

<style lang="scss">
.progress-container {
  width: 100%;
  height: 100%;
  position: relative;
  .progress-line-bg {
    width: 100%;
    height: 15px;
    background-color: yellow;
    border-radius: 7.5px;
    overflow: hidden;
    position: relative;
    .progress-line {
      width: 50%;
      height: 100%;
      background-color: red;
      background: linear-gradient(to right, black, red);
      position: relative;
      animation: meteor-animation 1s linear;
      position: absolute;
      @keyframes meteor-animation {
        0% {
          left: -150px;
        }
        100% {
          left: 0px;
        }
      }
    }
  }
  .progress-end {
    width: 30px;
    height: 30px;
    background-color: white;
    border: 2px solid black;
    border-radius: 50%;
    position: absolute;
    top: -7.5px;
    left: 142.5px;
    animation: meteor-animation2 1s linear;
  }
  @keyframes meteor-animation2 {
    0% {
      left: 0;
    }
    100% {
      left: 142.5px;
    }
  }
}
</style>
